<template>
  <div class="reports">
    <!-- 导航面包屑 -->
    <bread :linktitle="link"></bread>
    <!-- 导航面包屑 -->
    <!-- 图表展示 -->
    <div class="report_wrap">
      <div ref="eachart" class="charts"></div>
    </div>
    <!-- 图表展示 -->
  </div>
</template>
<script>
import * as echarts from 'echarts';
import bread from "../../common/breadcrumb";
export default {
  name: "report",
  data() {
    return {
      link: ["数据统计", "数据报表"],
      eachar: {},
    };
  },
  components: {
    bread,
  },
  created() {
    this.getechart();
    
  },

  methods: {
    async getechart() {
      let mes = await this.$http.get("reports/type/1");
      this.eachar = mes.data;
      this.setEchart()
    },
    setEchart() {
      var myChart = echarts.init(this.$refs["eachart"]);
      var option = {
         title: {
            text: '用户来源'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#E9EEF3'
              }
            }

          },
          legend: {
             data:this.eachar.data
    },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              boundaryGap: false,
               data: this.eachar.xAxis[0].data
            }
          ],
          yAxis: [
            {
              type: 'value',
              
            }
          ],
          series:this.eachar.series
      };
      myChart.setOption(option)
    },
  },
};
</script>
<style scoped>
.report_wrap {
  background-color: #fff;
  padding: 20px;
  margin-top: 20px;
}
.charts{
    width: 700px;
    height: 500px;
}
</style>